<template>
  <view class="page-container">
    <!-- 头部搜索区 -->
    <view class="search-area">
      <view class="search-box">
        <uni-icons type="search" size="20" color="#FF6B35"/>
        <input type="text" v-model="searchText" placeholder="搜索帖子" placeholder-class="search-placeholder" @confirm="handleSearch"/>
      </view>
    </view>

    <!-- 内容区域 -->
    <scroll-view class="content-area" scroll-y @scrolltolower="loadMore">
      <view class="post-list">
        <view v-for="(post, index) in posts" :key="index" class="post-card" @tap="handlePostDetail(post)">
          <view class="post-header">
            <view class="user-info">
              <image class="avatar" :src="post.member?.avatar || '/static/default-avatar.png'" mode="aspectFill"/>
              <view class="user-detail">
                <text class="username">{{post.member?.nickname || '用户'}}</text>
                <text class="post-time">{{formatTime(post.createdAt)}}</text>
              </view>
            </view>
          </view>
          <view class="post-content">
            <text class="post-title">{{post.title}}</text>
            <text class="content-text">{{post.content}}</text>
            <view v-if="post.images" class="content-images">
              <image 
                v-for="(img, imgIndex) in getImages(post.images)" 
                :key="imgIndex" 
                :src="img" 
                mode="aspectFill"
                class="content-image"
                @tap.stop="previewImage(getImages(post.images), imgIndex)"
              />
            </view>
          </view>
        </view>
      </view>
      <uni-load-more :status="loadMoreStatus" />
    </scroll-view>

    <!-- 发帖按钮 -->
    <view class="post-button" @click="handlePostClick">
      <uni-icons type="plus" size="24" color="#FFFFFF"/>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      posts: [],
      page: 1,
      pageSize: 10,
      loadMoreStatus: 'more' // more-加载前 loading-加载中 noMore-没有更多
    }
  },
  onShow() {
    this.loadPosts()
  },
  methods: {
    getImages(images) {
      if (!images) return []
      try {
        return JSON.parse(images)
      } catch (e) {
        return []
      }
    },
    formatTime(time) {
      if (!time) return ''
      const date = new Date(time)
      const now = new Date()
      const diff = now - date
      const minutes = Math.floor(diff / 1000 / 60)
      const hours = Math.floor(minutes / 60)
      const days = Math.floor(hours / 24)
      
      if (days > 0) return `${days}天前`
      if (hours > 0) return `${hours}小时前`
      if (minutes > 0) return `${minutes}分钟前`
      return '刚刚'
    },
    async loadPosts() {
      try {
        this.loadMoreStatus = 'loading'
        const res = await this.$api.getChatList({
          page: this.page,
          pageSize: this.pageSize,
          keyword: this.searchText
        })
        if (this.page === 1) {
          this.posts = res.list
        } else {
          this.posts = [...this.posts, ...res.list]
        }
        this.loadMoreStatus = res.list.length < this.pageSize ? 'noMore' : 'more'
      } catch (error) {
        console.error('Failed to load posts:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
        this.loadMoreStatus = 'more'
      }
    },
    handleSearch() {
      this.page = 1
      this.loadPosts()
    },
    loadMore() {
      if (this.loadMoreStatus !== 'more') return
      this.page++
      this.loadPosts()
    },
    handlePostClick() {
      uni.navigateTo({
        url: '/pages/chat/detail'
      })
    },
    handlePostDetail(post) {
      uni.navigateTo({
        url: `/pages/chat/detail?id=${post.id}`
      })
    },
    previewImage(images, current) {
      uni.previewImage({
        urls: images,
        current: images[current]
      })
    }
  }
}
</script>

<style>
page {
  background-color: #F8F4E9;
}

.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.search-area {
  padding: 20rpx;
  background-color: #FFFFFF;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #F5EFE0;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
}

.search-box input {
  flex: 1;
  margin-left: 10rpx;
  font-size: 28rpx;
}

.search-placeholder {
  color: #999;
}

.content-area {
  flex: 1;
  background-color: #F8F4E9;
}

.post-list {
  padding: 20rpx;
}

.post-card {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.user-detail {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.post-time {
  font-size: 24rpx;
  color: #999;
  margin-top: 4rpx;
}

.post-content {
  margin-bottom: 20rpx;
}

.post-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}

.content-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 20rpx;
}

.content-images {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5rpx;
}

.content-image {
  width: calc(33.33% - 10rpx);
  height: 200rpx;
  margin: 5rpx;
  border-radius: 8rpx;
}

.post-button {
  position: fixed;
  right: 40rpx;
  bottom: 40rpx;
  width: 100rpx;
  height: 100rpx;
  background-color: #FF6B35;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}
</style>
